<template>
    <div class="body">
        <div class="container">
            <div class="cart-container">
                <div class="cart-wrapper">
                    <div class="cart-goods-list">
                        <!-- 表头 -->
                        <div class="list-head">
                            <div class="col col-checked">
                                <i :class="{active:isCheckedAll}" @click="isCheckedAll = isCheckedAll? 0 : 1">√</i>
                                <span>全选</span>
                            </div>
                            <div class="col col-img"></div>
                            <div class="col col-name">商品名称</div>
                            <div class="col col-price">单价</div>
                            <div class="col col-num">数量</div>
                            <div class="col col-total">小计</div>
                            <div class="col col-action">操作</div>
                        </div>
                        <!-- 列表主体 -->
                        <div class="list-body">
                            <list-item v-for="(item,index) in goodsList" :key="item.goodsId" :goodInfo="item" @update="getData"></list-item>
                        </div>
                    </div>

                    <div class="cart-bar clearfix">
                        <div class="section-left">
                            <router-link to="/home" class="back-shopping">继续购物</router-link>
                            <span class="cart-total">
                                已选择
                                <span class="num">{{ totalNums }}</span>
                                件
                            </span>
                        </div>
                        <div class="section-right">
                            <span class="total-price">
                                <span>合计：</span>
                                <span class="price">{{ Number(totalPrice).toFixed(2) }}</span>
                                <span>元</span>
                                <a @click="goTrade" :class="{inactivation:totalNums == 0}">去结算</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import ListItem from "@/pages/Shopcart/ListItem";
import { throttle } from "lodash-es";
export default {
    data() {
        return {
            num: 1,
            searchParams: {
                pageNo: 0,
                pageSize: 1000,
            },
        };
    },
    components: {
        ListItem,
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            try {
                await this.$store.dispatch(
                    "shopcart/getShopCart",
                    this.searchParams
                );
            } catch (error) {
                this.$message({
                    message: error,
                    type: "error",
                });
            }
        },
        goTrade(){
            if(this.totalNums == 0){
                this.$message.warning("您还未选择商品！")
            }else{
                this.$router.push("/trade")
            }
        }
    },
    computed: {
        ...mapState("shopcart", ["goodsList", "totalNums", "totalPrice"]),
        // 获取商品总数量
        totalNums() {
            let initValue = 0;
            return this.goodsList.reduce((preViousValue, currentValue) => {
                if (currentValue.checked == 1) {
                    return preViousValue + currentValue.number;
                } else {
                    return preViousValue;
                }
            }, initValue);
        },
        // 检查全选状态
        isCheckedAll: {
            get() {
                return (
                    this.goodsList.every((item) => {
                        return item.checked == 1;
                    }) && this.goodsList.length != 0
                );
            },
            // 使用节流防止频繁请求
            set: throttle(async function (newValue) {
                // 利用Promise.all来进行多异步任务同步进行
                // 创建一个promiseList数组
                let promiseList = [];
                // 遍历列表，给每一个商品添加上
                this.goodsList.forEach((element) => {
                    let promise = new Promise((resolve, reject) => {
                        let params = {
                            goodId: element.goodsId,
                            checked: newValue,
                        };
                        resolve(
                            this.$store.dispatch(
                                "shopcart/updateChecked",
                                params
                            )
                        );
                    });
                    promiseList.push(promise);
                });

                let result = Promise.all(promiseList);
                result.then(
                    (value) => {
                        return this.getData();
                    },
                    (error) => {
                        this.$message({
                            message: error,
                            type: "error",
                        });
                    }
                );
            }, 600),
        },
    },
};
</script>

<style lang="less" scoped>
.body {
    width: 100%;
    padding: 38px 0 160px;
    box-sizing: border-box;
    min-height: 100vh;

    a {
        text-decoration: none;
    }
    .container {
        width: 1200px;
        margin: 0 auto;

        .cart-container {
            .cart-wrapper {
                .cart-goods-list {
                    background-color: white;
                    .list-head {
                        border-bottom: 1px solid rgb(224, 224, 224);
                        height: 70px;

                        // 设置头部列表的各个项的默认参数
                        .col {
                            font-size: 14px;
                            line-height: 70px;
                            height: 70px;
                        }
                    }

                    .list-body {
                    }

                    .col {
                        white-space: nowrap;
                        color: #424242;
                        float: left;
                    }
                    .col-checked {
                        width: 110px;
                        i {
                            display: inline-block;
                            text-align: center;
                            border: 1px solid rgb(224, 224, 224);
                            color: white;
                            width: 18px;
                            height: 18px;
                            line-height: 18px;
                            margin-left: 24px;
                            margin-right: 15px;
                            font-style: normal;
                            font-size: 14px;
                            font-weight: bold;
                            cursor: pointer;
                            user-select: none;
                        }

                        i:hover {
                            color: #424242;
                        }

                        .active {
                            background-color: rgb(255, 106, 0);
                            color: white !important;
                        }
                    }

                    .col-img {
                        width: 120px;
                        img {
                            width: 80px;
                        }
                    }
                    .col-name {
                        width: 380px;
                        padding-left: 40px;
                    }

                    .col-price {
                        width: 140px;
                        text-align: center;
                    }

                    .col-num {
                        width: 150px;
                        text-align: center;
                    }

                    .col-total {
                        width: 120px;
                        text-align: center;
                    }

                    .col-action {
                        width: 130px;
                        text-align: center;
                    }
                }

                .cart-bar {
                    margin-top: 24px;
                    background-color: white;
                    height: 50px;
                    line-height: 50px;
                    position: sticky;
                    bottom: 0;

                    .section-left {
                        float: left;
                        .back-shopping {
                            margin-left: 32px;
                            transition: all 0.3s ease;
                            font-size: 14px;
                            color: #757575;
                            cursor: pointer;
                        }

                        .back-shopping:hover {
                            color: #ff6700;
                        }

                        .cart-total {
                            border-left: 1px solid #eee;
                            margin-left: 16px;
                            padding-left: 16px;
                            font-size: 14px;
                            color: #757575;

                            .num {
                                display: inline-block;
                                color: #ff6700;
                            }
                        }
                    }

                    .section-right {
                        float: right;
                        height: 50px;
                        .total-price {
                            font-size: 14px;
                            color: #ff6700;
                            white-space: nowrap;
                            display: flex;
                            .price {
                                font-size: 30px;
                                line-height: 40px;
                            }

                            a {
                                height: 48px;
                                width: 200px;
                                background-color: rgb(255, 103, 0);
                                border: 1px solid rgb(255, 103, 0);
                                margin-left: 50px;
                                color: white;
                                font-size: 18px;
                                text-align: center;
                                transition: all 0.3s;
                                cursor: pointer;
                                user-select: none;
                            }

                            a:hover {
                                background-color: rgb(242, 88, 7);
                            }
                            // 设置按键失活时候的样式
                            .inactivation{
                                border: 1px solid rgb(176,176,176);
                                background-color: rgb(176,176,176);
                            }

                            .inactivation:hover{
                                background-color: rgb(117,117,117);
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>